<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Favicon icon -->
  <!--<link rel="stylesheet" href="css/iview.min.css">-->
  <!--<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">-->
  <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
  <title>壹脉智能CRM</title>
  <!-- Bootstrap Core CSS -->
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <link href="./css/perfect-scrollbar.min.css" rel="stylesheet">
  <!-- This page CSS -->
  <!-- chartist CSS -->
  <!-- <link href="../assets/node_modules/morrisjs/morris.css" rel="stylesheet"> -->
  <!--c3 CSS -->
  <!-- <link href="../assets/node_modules/c3-master/c3.min.css" rel="stylesheet"> -->
  <!--Toaster Popup message CSS -->
  <!-- <link href="../assets/node_modules/toast-master/css/jquery.toast.css" rel="stylesheet"> -->
  <!-- Custom CSS -->
  <link href="css/style.min.css" rel="stylesheet">
  <!-- Dashboard 1 Page CSS -->
  <!--<link href="css/pages/dashboard1.css" rel="stylesheet">-->
  <!-- You can change the theme colors from here -->
  <link href="css/colors/default.css" id="theme" rel="stylesheet">
  <link rel="stylesheet" href="css/diy.min.css">
  <!-- page css -->
  <link href="css/pages/user-card.css" rel="stylesheet">
  <!-- Popup CSS -->
  <link href="css/magnific-popup.css" rel="stylesheet">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="fix-header fix-sidebar card-no-border">
  <div class="preloader">
    <div class="loader">
      <div class="loader__figure"></div>
      <p class="loader__label">壹脉</p>
    </div>
  </div>
  <div id="main-wrapper">
    <header class="topbar">
      <nav class="navbar top-navbar navbar-expand-md navbar-light">
        <div class="navbar-header">
          <a class="navbar-brand" href="../index.html">
            <b>
              <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo" />
              <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
            </b>
            <span>
              <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
            </span>
          </a>
        </div>
        <div class="navbar-collapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
            <li class="nav-item"><a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
          </ul>
          <user-head></user-head>
        </div>
      </nav>
    </header>
    <aside class="left-sidebar">
      <div class="scroll-sidebar">
        <company-position></company-position>
        <nav class="sidebar-nav p-0">
          <c-slider current="5"></c-slider>
        </nav>
      </div>
    </aside>
    <div class="page-wrapper">
      <div class="container-fluid">
        <div class="row page-titles">
          <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">预约管理</h3>
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
              <li class="breadcrumb-item">
                企业管理
              </li>
              <li class="breadcrumb-item active">
                <a href="/main/appointmentControl.html">
                  预约管理
                </a>
              </li>
              <li class="breadcrumb-item active">发布产品</li>
            </ol>
          </div>
        </div>
        <!--流程-->
        <div class="bgfff lh70 fs14 cblue_2 p-l-30 d-flex align-cen m-b-20">
          <span class="mdi mdi-exclamation w40 h40 braduis50p bgblue cfff fs30 textc lh40 m-r-20"></span>
          <span>发布流程：1.选择产品分类 ------ 2.输入产品基本信息 ------ 3.输入产品详情 ------ 4.发布产品</span>
        </div>
        <!--添加产品-->
        <div class="bgfff p-l-29 p-r-31 p-t-29 p-b-50">
          <!-- 1 -->
          <p class="m-b-29">1.选择产品分类</p>
          <div class="d-flex align-cen p-b-29 bbef0">
            <span class="has-danger p-r-25">产品分类 <span class="form-control-feedback">*</span></span>
            <select class="custom-select w240 m-r-20 bced" v-model="prodClass" @change="selectClassChange">
              <option value="" class="cbcc">选择产品分类</option>
              <option v-for="(v,k) in goodsTypeNames" :key="v.productsTypeId" :value="v.productsTypeId">
                {{v.productsTypeName}}
              </option>
            </select>
            <span class="bgblue cfff lh30 p-l-20 p-r-20 bradius4 m-r-10" @click="addGoodsType">新增分类</span>
          </div>
          <!-- 2 -->
          <p class="m-b-19 p-t-29">2.输入产品基本信息</p>
          <!--标题-->
          <div class="d-flex align-cen">
            <span class="has-danger p-r-25">产品标题 <span class="form-control-feedback">*</span></span>
            <div class="lh38 bced bradius4 h38 p-r-20">
              <input type="text" class="b0 phgray p-l-17 w576 p-r-19 bradius4 h34" placeholder="请输入产品名称" v-model="goodsName">
              <span>{{goodsName.length}}/30</span>
            </div>
          </div>
          <div class="d-flex align-cen p-t-29">
            <span class="has-danger p-r-25">产品价格 <span class="form-control-feedback">*</span></span>
            <div class="disflex">
              <label class="m-r-20 disflex align-cen">
                <div class="custom-control custom-radio">
                  <input type="radio" id="priceSpecific" class="custom-control-input" value="1" v-model="priceType">
                  <label for="priceSpecific" class="c38 m-l-5 m-r-10 custom-control-label">具体金额</label>
                </div>
                <input type="text" class="lh38 bced bradius4 h38 p-l-10 w100 p-r-10" :disabled="priceType!=1" v-model="specificPrice" placeholder="如：99.00">
              </label>
              <label class="disflex align-cen">
                <div class="custom-control custom-radio">
                  <input type="radio" id="priceArea" class="custom-control-input" value="2" v-model="priceType">
                  <label for="priceArea" class="c38 m-l-5 m-r-5 custom-control-label">区间金额</label>
                </div>
                <input type="text" class="lh38 bced bradius4 h38 p-l-10 w100 p-r-10" :disabled="priceType!=2" v-model="areaPrice[0]" placeholder="如：99">
                <span>~</span>
                <input type="text" class="lh38 bced bradius4 h38 p-l-10 w100 p-r-10" :disabled="priceType!=2" v-model="areaPrice[1]" placeholder="如：99">
              </label>
            </div>
          </div>
          <div class="d-flex align-cen p-t-29">
            <span class="has-danger p-r-25">产品简述 <span class="form-control-feedback">*</span></span>
            <div class="lh38 bced bradius4 h38 p-r-20">
              <input type="text" class="b0 phgray p-l-17 w576 p-r-19 bradius4 h34" placeholder="请输入产品简述" v-model="describe">
            </div>
          </div>
          <!--图片-->
          <div class="d-flex p-t-29">
            <span class="has-danger p-r-25">商品图片 <span class="form-control-feedback">*</span></span>
            <span class="cbcc flex1">上传图片的最佳尺寸：800像素*800像素，其他尺寸会影响页效果，格式png，jpeg，jpg。大小不超过2M，商品图片一共可以上传5张，默认第一张为主图封面</span>
          </div>
          <div class="d-flex p-t-29 p-l-92 lh120 p-b-30 bbef0">
            <div class="w120 h120 bradius4 textc bced m-r-20 position-relative ohidden goods-img" v-for="(v,k) in prod_imgs" :style="'background-image: url('+v+')'" :key="k">
              <img @click="delPic(k)" class="del-goods-pic" src="https://you-one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crmpc/2f2fbcd8d2b2177e884423142be14ac.png">
              <!--                        <img :src="v" alt="" class="w100p h100p position-absolute left0 top0 bradius4">-->
            </div>
            <label class="w120 h120 bradius4 textc bced m-r-20 position-relative ohidden icon-plus">
              <input type="file" id="file" name="image_url" style="float: left;display: none" @change="fch" />
            </label>
          </div>
          <div class="d-flex p-t-29">
            <span class="p-r-25">分享图片</span>
            <span class="cbcc flex1">上传图片及支持png/jpg 。显示图片长宽比为5:4</span>
          </div>
          <div class="p-t-29 p-l-92 p-b-30 bbef0">
            <div class="w120 h120 bradius4 textc bced m-r-20 position-relative ohidden goods-img dis-inline-block m-b-0" v-if="goodsShareImg" :style="'background-image: url('+goodsShareImg+')'">
              <img @click.stop="removeShareImg" class="del-goods-pic" src="https://you-one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crmpc/2f2fbcd8d2b2177e884423142be14ac.png">
              <!--                        <img :src="v" alt="" class="w100p h100p position-absolute left0 top0 bradius4">-->
            </div>
            <label v-else class="w120 h120 bradius4 textc bced m-r-20 position-relative ohidden icon-plus dis-inline-block m-b-0">
              <input type="file" ref="shareImg" style="display: none" @change="uploadShareImg" />
            </label>
            <span>
              用于小程序分享时展示图片
            </span>
          </div>
          <!-- 2 -->
          <p class="m-b-19 p-t-29">3.服务方式</p>
          <!--标题-->
          <div class="d-flex align-cen">
            <span class="has-danger p-r-25">服务方式 <span class="form-control-feedback">*</span></span>
            <div class="disflex p-r-20">
              <div class="custom-control custom-checkbox m-r-20">
                <input type='checkbox' class="custom-control-input" id='wuhan' value='1' v-model='serviceType' />
                <label for='wuhan' class="custom-control-label">到店</label>
              </div>
              <div class="custom-control custom-checkbox">
                <input type='checkbox' class="custom-control-input" id='xian' value='2' v-model='serviceType' />
                <label for='xian' class="custom-control-label">上门</label>
              </div>
            </div>
          </div>
          <!-- 3 详情-->
          <p class="m-b-0 p-t-29">4.输入产品详情</p>
          <div class="p-t-25 p-b-29">
            <span class="has-danger p-r-25">产品详情 <span class="form-control-feedback">*</span></span>
            <div id="editor" class="p-t-29">
            </div>
          </div>
          <!--操作-->
          <div class="d-flex lh40">
            <span class="bgblue cfff hoverfff w85 textc h40 bradius4 m-r-20" @click="addGoodsInfo(goodsId)">发布</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- All Jquery -->
  <!-- ============================================================== -->
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap popper Core JavaScript -->
  <!-- <script src="../assets/node_modules/bootstrap/js/popper.min.js"></script> -->
  <script src="js/bootstrap.min.js"></script>
  <!--<script src="js/iview.min.js"></script>-->
  <!--<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">-->
  <!--<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>-->
  <!-- slimscrollbar scrollbar JavaScript -->
  <script src="js/perfect-scrollbar.jquery.min.js"></script>
  <!--Wave Effects -->
  <!-- <script src="js/waves.js"></script> -->
  <!--Menu sidebar -->
  <script src="js/sidebarmenu.js"></script>
  <!--Custom JavaScript -->
  <script src="js/custom.min.js"></script>
  <!-- ============================================================== -->
  <!-- This page plugins -->
  <!-- ============================================================== -->
  <!--morris JavaScript -->
  <!-- <script src="../assets/node_modules/raphael/raphael-min.js"></script>
<script src="../assets/node_modules/morrisjs/morris.min.js"></script> -->
  <!--c3 JavaScript -->
  <!-- <script src="../assets/node_modules/d3/d3.min.js"></script>
<script src="../assets/node_modules/c3-master/c3.min.js"></script> -->
  <!-- Popup message jquery -->
  <!-- <script src="../assets/node_modules/toast-master/js/jquery.toast.js"></script> -->
  <!-- ============================================================== -->
  <!-- Magnific popup JavaScript -->
  <!-- <script src="../assets/node_modules/Magnific-Popup-master/dist/jquery.magnific-popup.min.js"></script>
<script src="../assets/node_modules/Magnific-Popup-master/dist/jquery.magnific-popup-init.js"></script> -->
  <!-- ============================================================== -->
  <!-- Style switcher -->
  <!-- ============================================================== -->
  <!-- <script src="../assets/node_modules/styleswitcher/jQuery.style.switcher.js"></script> -->
  <script src="js/vue.js"></script>
  <script src="js/layer/layer.js"></script>
  <!--<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>-->
  <!--<script src="js/headers.js"></script>-->
  <!--<script src="js/Aside.js"></script>-->
  <!--富文本编辑器-->
  <script type="text/javascript" src="js/wangEditor.js"></script>
  <script src="js/config.js"></script><script src="js/extend.js"></script>
  <script>
  $(function() {
    var vw = new Vue({
      el: '#main-wrapper',
      // components:{header},
      data: {
        username: '用户昵称',
        search_key: '', //搜索关键字
        prodClass: '', //筛选分类的值
        title: '', //产品标题
        /**添加/修改商品信息*/
        goodsId: '', // 商品id
        goodsName: '', // 商品名称
        goodstypeId: '', // 商品类型ID
        goodsDetails: '', // 商品详情
        goodsShareImg: '', // 商品分享图片
        ispayment: '1', // 1线上支付，2其他
        remark: '', // 商品备注
        specIds: '', // 商品规格（逗号隔开）
        goodPhoto: '', // 商品图片（逗号隔开）
        /**添加/修改商品规格*/
        specId: '', //规格id
        specName: '', //规格名称
        specAttribute: '', //属性名称
        specNum: '', //规格库存
        price: '', //规格价格
        parentId: '', //父级id（如果是类型的第一个属性就给0，如果不是就给第一个属性的specId）
        prod_imgs: [], //产品图片
        img_click: 0,
        typeShow: '', //添加类型弹框
        editor: null,
        edit_html: '',
        describe: '',
        goodsTypeNameList: [],
        goodsTypeNames: [],
        priceType: '1',
        serviceType: [],
        specificPrice: '', // 具体金额值
        areaPrice: ['', ''], // 区间金额
        isLoading: false, // 是否提交中
      },
      mounted() {
        var params = $.formatParams(location.href);
        this.initEditor();
        if (params.id > 0) {
          this.goodsId = params.id;
          this.getGoodsInfoPC(this.goodsId);
        }
        this.goodsTypeNameListInfo();
      },
      methods: {
        initEditor() {
          var E = window.wangEditor;
          this.editor = new E(document.getElementById('editor'));
          window.editor = this.editor;
          this.editor.customConfig.uploadImgShowBase64 = true;
          this.editor.customConfig.pasteTextHandle = function(content) {

            if (content == '' && !content) return ''
            let str = content;
            str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '');
            str = str.replace('/(\\n|\\r| class=(")?Mso[a-zA-Z]+(")?)/g', '');
            let reg = new RegExp('<!--(.*?)-->', 'g')
            str = str.replace(reg, '');

            return str;
          }
          //插入图片回调
          this.editor.customConfig.linkImgCallback = function(url) {
            console.log(url) // url 即插入图片的地址
          };
          this.editor.customConfig.customUploadImg = function(files, insert) { //自选图片
            let formData = new FormData();
            formData.append('file', files[0]);

            $.uploadFile(formData).then(res => {
              this.editor.txt.html(this.editor.txt.html() + '<img style="max-width:100%;height:auto;display:block" src="' + $.baseFileUrl + '/' + res.data + '.primary.png" mode="widthFix"/>');
            })
          };
          this.editor.customConfig.onchange = (html) => {
            console.log(html);
            // this.quizData.quizTitle = html;
          }
          this.editor.create();
        },
        delPic(idx) {
          this.prod_imgs.splice(idx, 1);
        },
        search() { //搜索
          console.log(this.search_key)
        },
        selectClassChange() {
          console.log(this.seleceValue)
        },
        // 校验字段
        checkField() {
          let obj = {
            prodClass: '请选择分类！',
            goodsName: '请输入产品标题！',
            describe: '请输入描述'
          };
          let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;

          for (let key in obj) {
            if (!this[key].toString().trim()) {
              layer.alert(obj[key]);
              return false;
            }
          }


          if (this.priceType == 1) {
            if (this.specificPrice <= 0) {
              layer.alert('请输入具体金额！');
              return false;
            }

            if (!reg.test(this.specificPrice)) {
              layer.alert('请输入正确金额！');
              return false;
            }
          }

          if (this.priceType == 2) {
            let [start, end] = this.areaPrice;
            start = parseFloat(start);
            end = parseFloat(end);

            if (start <= 0) {
              layer.alert('请输入最小金额！');
              return false;
            }

            if (end <= 0) {
              layer.alert('请输入最大金额！');
              return false;
            }

            if (!reg.test(end) || !reg.test(start)) {
              layer.alert('请输入正确金额！');
              return false;
            }

            if (end < start) {
              layer.alert('最大金额不能小于最小金额！');
              return false;
            }
          }

          if (this.serviceType.length < 1) {
            layer.alert('至少选择一种服务方式');
            return false;
          }

          return true;
        },
        addGoodsInfo(id) { // 添加商品信息
          if (!this.checkField() || this.isLoading) return;

          var _this = this;
          var param = {};
          if (id > 0) {
            param.productsId = id;
          }

          param.productsTypeId = _this.prodClass;
          param.productsName = _this.goodsName;
          param.price = _this.priceType == 1 ? _this.specificPrice : JSON.stringify(_this.areaPrice);;
          param.productsDetails = this.editor.txt.html();
          param.productsPhoto = _this.prod_imgs.map(val => {
            return val.replace('.primary.png', '');
          }).join(',');
          param.sharePhoto = _this.goodsShareImg;
          param.describe = _this.describe;
          param.serviceType = this.serviceType.reduce((sum, val) => (parseInt(sum) + parseInt(val)))

          this.isLoading = true;
          $.cAjax('/crmPc/products/insertProducts', {
            data: param
          }).then((data) => {
            layer.msg("操作成功");
            setTimeout(function() {
              this.isLoading = false;
              location.href = location.origin + '/main/appointmentControl.html';
            }, 1 * 1000);
          }).catch((err) => {
            this.isLoading = false;
          });
        },
        addGoodsType() { //添加产品类型
          var param = {};
          layer.prompt({ title: '请输入类型名称', formType: 0 }, (val, index) => {
            param.productsTypeName = val;
            $.cAjax('/crmPc/products/insertProductsType', {
              data: param
            }).then((data) => {
              layer.msg("操作成功");
              // 加载数据
              this.goodsTypeNameListInfo();
            }).catch(function(err) {});
            layer.close(index);
          });
        },
        goodsTypeNameListInfo() { //加载商品分类-下拉
          this.goodsTypeNames = [];
          var _this = this;
          $.cAjax('/crmPc/products/selectProductsTypeList', {
            data: {
              ignore: true,
            }
          }).then(function(data) {
            if (data) {
              _this.goodsTypeNames = data || [];
            }
          }).catch(function(err) {

          });
        },
        getGoodsInfoPC(id) { //加载商品详情
          var _this = this;
          $.cAjax('/crmPc/products/getProductsInfo', {
            data: { productsId: id }
          }).then(function(data) {
            if (data) {
              let price
              try {
                price = JSON.parse(data.price);
              } catch (e) {
                price = parseInt(data.price) || 0;
              }

              if (Object.prototype.toString.call(price).toLowerCase() === '[object number]') {
                _this.priceType = 1;
                _this.specificPrice = data.price;
              } else {
                _this.priceType = 2;
                _this.areaPrice = price;
              }

              _this.goodsName = data.productsName;
              _this.goodsDetails = data.productsDetails;
              _this.goodsTypeName = data.productsTypeName;
              _this.prodClass = data.productsTypeId;
              _this.goodsShareImg = data.sharePhoto;
              _this.describe = data.describe;
              _this.prod_imgs = data.productsPhoto ?
                data.productsPhoto.split(",").map(val => {
                  return $.checkImgNameIsNumber(val) ? val : (val + '.primary.png')
                }) : [];
              _this.serviceType = data.serviceType == 3 ? ['1', '2'] : [data.serviceType];
              _this.editor.txt.html(data.productsDetails);
            }
          }).catch(function(err) {
            console.log(err)
          });
        },
        confirm() { //发布
          console.log(this.editor.txt.html());
        },
        fch: function() {
          var v = this;
          var f = document.getElementById('file');
          if (f.files[0].type != 'image/png' && f.files[0].type != 'image/jpeg' && f.files[0].type != 'image/jpg') {
            layer.alert("请选择png、jpg、jpeg格式的图片");
            return
          }
          if (f.files[0].size / 1024 > 1024 * 2) {
            layer.alert('请上传小于2M的图片！');
            return
          }

          if (this.prod_imgs.length > 5) {
            layer.alert('最多只能上传5张图片');
            return;
          }

          let formData = new FormData;
          formData.append('file', f.files[0]);

          $.uploadFile(formData).then(res => {
            f.value = '';
            this.prod_imgs.push($.baseFileUrl + '/' + res.data + '.primary.png');
          }).catch(() => {
            f.value = '';
          });

        },
        // 上传分享图片
        uploadShareImg: function() {
          var f = this.$refs.shareImg;
          if (f.files[0].type != 'image/png' && f.files[0].type != 'image/jpeg' && f.files[0].type != 'image/jpg') {
            layer.alert("请选择png、jpg、jpeg格式的图片");
            return
          }
          if (f.files[0].size / 1024 > 1024 * 2) {
            layer.alert('请上传小于2M的图片！');
            return
          }

          let formData = new FormData;
          formData.append('file', f.files[0]);

          $.uploadFile(formData).then(res => {
            f.value = '';
            this.goodsShareImg = $.baseFileUrl + '/' + res.data + '.primary.png';
          }).catch(() => {
            f.value = '';
          });

        },
        removeShareImg() {
          this.goodsShareImg = '';
        },
      }

    })
  })
  </script>
</body>

</html>
